<template>
	<view class="login-wrapper">
		<view class="login-title">
			<view class="login-title-txt">
				请注册账号！
			</view>
			<text class="login-title-small-txt">开启您的快乐购物之旅！</text>
		</view>
		<view class="login-form">
			<view class="form-item flex-c">
				<text class="form-item-lable">手机号</text>
				<input type="text" class="form-item-input" v-model="phone" placeholder="输入手机号" />
			</view>
			<view class="form-item flex-c">
				<text class="form-item-lable">验证码</text>
				<input type="number" class="form-item-input" v-model="code" placeholder="输入短信验证码" />
				<text class="get-code-btn fz26 color-theme" @click="getTestCode">{{ codeTxt }}</text>
			</view>
			 
			<view class="form-item flex-c">
				<text class="form-item-lable">登陆密码</text>
				<input type="password" class="form-item-input" v-model="loginPassword" placeholder="输入登陆密码" />
			</view>
			
			<view class="form-item flex-c">
				<text class="form-item-lable">确认密码</text>
				<input type="password" class="form-item-input" v-model="confirmLoginPassword" placeholder="输入确认登陆密码" />
			</view>
			
			<view class="form-item flex-c">
				<text class="form-item-lable">邀请码</text>
				<input type="text" class="form-item-input" v-model="invitationCode" placeholder="输入邀请码" />
			</view>
			
			<view class="agreement flex-c">
				<checkbox-group @change="agreeChange">
					<label class="flex-c">
						<checkbox value="cb" color="#EB5883" style="transform:scale(0.75)" />我已阅读并同意
					</label> 
				</checkbox-group>
				<text @click="gotoAgreement(1)">《注册协议》</text>
				<text @click="gotoAgreement(2)">《隐私政策》</text>
			</view>
			
			<button class="login-btn" @click="registerHandle">注册</button> 
		</view>  
	</view>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs } from 'vue'
import { onReady, onUnload } from '@dcloudio/uni-app'
import { getCode, register, } from '@/http/api'


export default defineComponent({
	setup() { 
		const timer = ref()
		const agree = ref(false)
		const state = reactive({
			phone: '',
			code: '',
			second: 60,
			loginPassword: '',
			invitationCode:'',
			confirmLoginPassword: '',
			codeTxt: '获取验证码',
		})
		onReady(() => {
		   
		})
		onUnload(() => {
			clearInterval(timer.value)
		})
		const registerHandle = async () => {
			if(!/^1[35789]\d{9}$/.test(state.phone)) {
				uni.showToast({ icon: 'none', title: '输入正确的手机号'})
				return
			}
			if(!/^\d{6}$/.test(state.code)) {
				uni.showToast({ icon: 'none', title: '输入6位验证码'})
				return
			}
			if(!state.loginPassword) {
				uni.showToast({ icon: 'none', title: '输入登陆密码'})
				return
			}
			if(!state.confirmLoginPassword) {
				uni.showToast({ icon: 'none', title: '输入确认登陆密码'})
				return
			}
			if(state.loginPassword !== state.confirmLoginPassword) {
				uni.showToast({ icon: 'none', title: '两次登陆密码不一致'})
				return
			}
			if(!agree.value) {
				uni.showToast({ icon: 'none', title: '请勾选用户协议和隐私政策'})
				return
			}
			let res = await register({
				phone: state.phone,
				verificationCode: state.code,
				invitationCode: state.invitationCode,
				loginPassword: state.loginPassword,
				confirmLoginPassword: state.confirmLoginPassword,
			}) 
			if(res.code === 0 ) {
				uni.showToast({
					icon: 'success',
					title: '注册成功'
				})
				clearInterval(timer.value)
				setTimeout(() => uni.navigateBack(), 2000)
			} else { 
				uni.showToast({
					icon: 'error',
					title: res.msg
				})
			}
		}
		
		const getTestCode = async () => { // 15502992957
			if(state.codeTxt !== '获取验证码') return;
			try{
				let res = await getCode(state.phone); 
				if(res.code === 0 ) {
					uni.showToast({
						icon: 'success',
						title: '验证码已发送成功'
					})
					timer.value = setInterval(() => {
						if(state.second <= 0) {
							clearInterval(timer.value)
							state.second = 60
							state.codeTxt = '获取验证码'
							return
						}
						state.second --
						state.codeTxt = `${state.second}后重新发送`  
					}, 1000) 
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				}  
			}catch(e){ 
				uni.showToast({
					icon: 'error',
					title: '网络错误'
				})
			}
			
		}
		const agreeChange = (event: any) => {
			if(event.detail.value.length) {
				agree.value = true
			} else {
				agree.value = false
			}
		}
		
		const gotoAgreement = (id: any) => {
			uni.navigateTo({
				url: `/pages/login/agreement?id=${id}`
			})
		}
		
		return {
			getTestCode,
			registerHandle,
			agreeChange,
			gotoAgreement,
			...toRefs(state)
		}
	}
})
</script>

<style lang="scss" scoped>
.login-wrapper{
	padding: 40rpx 0;
	.login-title{
		margin-left: 24rpx;
		.login-title-txt{
			font-size: 48rpx;
			font-weight: 700;
		}
		.login-title-small-txt{
			font-size: 28rpx;
			color: #999;
		}
	}
	.login-form{
		margin: 60rpx ;
		.form-item{
			height: 90rpx;
			background-color: #f0f0f0;
			border-radius: 45rpx;
			padding: 0 30rpx;
			margin-bottom: 30rpx;
			&:last-child{
				margin-bottom: 0rpx;
			}
			.form-item-lable{
				width: 160rpx;
				font-size: 32rpx;
				color: #666; 
			}
			.form-item-input{
				flex: 1;
				height: 32rpx;
				font-size: 32rpx;
			}
		} 
		.login-btn{
			height: 90rpx;
			background-color: $theme-primary-color;
			margin-top: 40rpx;
			border-radius: 45rpx;
			color: #fff;
			line-height: 90rpx;
			font-size: 34rpx;
		}
	} 
	.agreement{
		margin-top: 100rpx;
		font-size: 26rpx;
		color: #666;
		justify-content: center;
	}
}	
</style>
